import styled from 'styled-components'

export const MineContair = styled.div`
    flex:1;
    background:#f2f2f2;
    overflow:hidden;
    overflow-y:auto;
`
export const MyHeader = styled.div`
    text-align:center
    height:.5rem;
    width:100%;
    font-size:.16rem;
    line-height:.38rem;
    padding-bottom:.12rem;
    display:flex;
    justify-content:space-between;
    position:absolute; 
    left:0;
    top:0;  
    .mine_back{
        display:inline-block;
        width:.38rem;
        height:.38rem;
        background:url('/img_my/back_white_bg.png') no-repeat center center;
        vertical-align:middle;
    }
    span{
        vertical-align:middle;
        flex:1;
        color:#fff;
    }
    .mine_home{
        display:inline-block;
        width:.38rem;
        height:.38rem;
        background:url('/img_my/home_white_bg.png') no-repeat center center;
        background-size:.28rem;
        vertical-align:middle;
        margin-right:.04rem;
    }
`

export const UnLogin = styled.div`
    width:100%;
    padding-top:.5rem;
    background-image: linear-gradient(-204deg,#fd465f 0,#fc5e9f 100%);
    position:relative;
    
    .beforelogin{
        .headPortrait{
            width:.6rem;
            height:.6rem;
            background-image:url('/img_my/noportrait.png');
            background-size:.6rem;
            margin:auto
        }
        .operation{
            width:2rem;
            margin:auto;
            display:flex;
            padding:.1rem;
            a{
                display:inline-block;
                width:.95rem;
                color:#fff;
                font-weight:700;
                font-size:.2rem;
                text-align:center;
                line-height:.25rem
            }
            .separator{
                width:.01rem;
                height:.15rem;
                display:inline-block;
                background:#fff;
                vertical-align:middle;
                margin-top:.06rem;
            }
        }
    }

    .afterlogin{
        position:relative;
        img{
            width:.64rem;
            height:.64rem;
            display:block;
            border-radius:50%;
            position:absolute;
            left:.32rem;
            top:.42rem;
            z-index:10;
        }
        .userinfo{
            width:100%;
            height:.76rem;
            position:relative;
            div{
                position: absolute;
                left: 1.12rem;
                bottom: .04rem;
                color:#fff;
                display:flex;
                flex-direction:column;
                .name{
                    font-family: sans-serif;
                    line-height: 20px;
                    display:block;
                    text-align:left;
                    padding-left:.1rem;
                }
                .grade{
                    padding:.03rem .05rem;
                    background: rgba(255,255,255,.2);
                    border-radius:1rem;
                    line-height:.18rem;
                    font-size:.14rem;
                }
            }

        }
        .icons{
            width:100%;
            height:.5rem;
            background:#fff;
            div{
                width:80%;
                float:right;
                display:flex;
                justify-content:space-around;
            
                a{
                    display:inline-block;
                    width:.76rem;
                    height:.5rem;
                    i{
                        display:block;
                        width:.18rem;
                        height:.18rem;
                        margin: .07rem auto .04rem;
                        background-size:.17rem;
                        background-repeat:no-repeat;
                        background-position:center;
                    }
                    .wish{
                        background-image:url('/img_my/wishlist.png')
                    }
                    .start{
                        background-image:url('/img_my/onsale.png')
                    }
                    .collection{
                        background-image:url('/img_my/fav.png')
                    }
                    span{
                        color:#666;
                        width:100%;
                        display:inline-block;
                        font-size:.14rem;
                        text-align:center;
                    }
                }
            }
        }
    }
    
`

export const Title = styled.div`
        height:.34rem;
        line-height:.34rem;
        font-size:.14rem;
        padding-left:.08rem;
        border-bottom: 1px solid #eaeaea;
        text-align:left;
        display:flex;
        justify-content:space-between;
        a{
            color:black;
        }

`

export const OrderBlock = styled.div`
    i{
        display:inline-block;
        width:.20rem;
        height:.20rem;
        background-size:.20rem;
        margin-right:.1rem;
    }
    margin-top:.12rem;
    background:#fff;
        i{
            background-image:url('/img_my/myorder.png');
            vertical-align:middle;
        }
        a{
            color: #999;
            font-size: .12rem;
            margin-right:.05rem;
            span{
                vertical-align:middle;
            }
            .right_arrow{
                vertical-align:middle;
                margin-right:0;
                background-image:url('/img_my/advance_bg.png');
            }
        }
    .orderContent{
        display:flex;
        a{
            display:inline-block;
            padding:.1rem 0;
            text-align:center;
            color:#666;
            font-size:.14rem;
            width:25%;
            display:flex;
            flex-direction:column;
            i{
                display: block;
                width: .34rem;
                height: .34rem;
                margin: .1rem auto;
                background-size: .34rem;
            }
            .unpaid{
                background-image:url('/img_my/unpaid.png');
            }
            .unconfirm{
                background-image:url('/img_my/unconfirm.png');
            }
            .uncomment{
                background-image:url('/img_my/uncomment.png');
            }
            .refund{
                background-image:url('/img_my/refund.png');
            }
        }
    }
`

export const PropertyBlock = styled.div`
    i{
        display:inline-block;
        width:.2rem;
        height:.2rem;
        background-size:.2rem;
        margin-right:.1rem;
    }
    margin-top:.12rem;
    background:#fff;
    i{
        background-image:url('/img_my/myfund.png');
        vertical-align:middle;
    }
    .orderContent{
        display:flex;
        a{
            display:inline-block;
            padding:.1rem 0;
            text-align:center;
            color:#666;
            font-size:.14rem;
            width:25%;
            span{
                display:inline-block;
                line-height:.25rem;
            }
        }
    }
`

export const ListBlock = styled.div`
    i{
        display:inline-block;
        width:.25rem;
        height:.25rem;
        background-size:.25rem;
        margin-right:.1rem;
    }
    margin-top:.12rem;
    background:#fff;
    a{
        display:flex;
        justify-content:space-between;
        color:#333;
        padding-left:.08rem;
        height:.44rem;
        line-height:.44rem;
        font-size:.15rem;
        text-align:left;
        border-bottom:.01rem solid #eaeaea;
        span{
            .rmaservice{
                background-image:url('/img_my/rmaservice.png');
                vertical-align:middle;
            }
            .feedback{
                background-image:url('/img_my/feedback.png');
                vertical-align:middle;
            }
            .address{
                background-image:url('/img_my/address.png');
                vertical-align:middle;
            }
            .logout{
                background-image:url('/img_my/logout.png');
                vertical-align:middle;
            }
            .tel{
                background-image:url('/img_my/tel.png');
                vertical-align:middle;
            }
        }
        .right_arrow{
            background-image:url('/img_my/advance_bg.png');
            vertical-align:middle;
            margin:.06rem .06rem 0 0;
        }
    }
`
export const Hink = styled.div`
    color:#999;
    font-size:.12rem;
    margin:.15rem;
    line-height:.15rem;
    text-align:left;
`